<template>
    <div>
      <slotDemo>
        <h1>555</h1>
      </slotDemo>
      <hr>
  <myBorder>
    <img src="https://img0.baidu.com/it/u=3368678403,249914024&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=46a3ab3b84070007415537fac57564cc" >
  </myBorder>
  <hr>
  <myBorderName>
    <template v-slot:content>
      <h1>早</h1>
      <h2>1999</h2>
    </template>
    <template v-slot:author>
      <span>太宰治</span>
    </template>
  </myBorderName>
  
  <myBorderName>
    <template #content>
      <h1>早</h1>
      <h2>1999</h2>
    </template>
    <template #author>
      <span>太宰治</span>
    </template>
  </myBorderName>
  <hr>
  <myBorderScope>
    <template v-slot="scope">
      <h1>{{ scope.row.name }} {{ scope.row.age }} {{ scope.text }}</h1>
    </template>
  </myBorderScope>
    </div>
  </template>
  
  <script>
  import myBorder from './components/myBorder.vue';
  import slotDemo from './components/slot-demo.vue';
  import myBorderName from './components/my-border-name.vue';
  import myBorderScope from './components/my-border-scope.vue';
  export default {
    components:{
      slotDemo,
      myBorder,
      myBorderName,
      myBorderScope
    }
  }
  </script>
  
  <style>
  
  </style>